<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>2.事件传参</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>欢迎来到{{school}}学习</h1>
            <button @click="show1">按钮1（不传参，回调也会收到一个事件对象）</button> <br><br>
            <button @click="show2(6)">按钮2（传一个参数）</button> <br><br>
            <button @click="show3(6,7,8)">按钮3（传三个参数）</button> <br><br>
            <button @click="show4(6,$event,7,8)">按钮4（传参的同时需要事件对象）</button> <br><br>
            <button @click="show5(school)">按钮5（传递的参数也可以是data中的数据）</button> <br><br>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            new Vue({
                el:'#demo',
                data:{
                    school:'尚硅谷'    
                },
                methods:{
                    show1(e){
                        console.log('我收到了一个参数，是事件对象',e)
                    },
                    show2(a){
                        console.log('show2执行了',a)
                    },
                    show3(a,b,c){
                        console.log('show3执行了',a,b,c)
                    },
                    show4(a,b,c,d){
                        console.log('show4执行了',a,b,c,d)
                    },
                    show5(s){
                        console.log(s)
                    }

                }
            })
        </script>
    </body>
</html>